<template>
  <div>
    <div class="head-btn-box flex-a pad-t15">
        <div 
            v-for="(menuItem, menuIndex) in menuList" 
            :key="menuIndex"
            @click="toPath('', menuIndex)"
        >
            <div class="head-btn padlr13 flex-a" v-if="!menuIndex" >
                <el-image
                    style="width: 14px; height: 14px"
                    :src="getAssetsImages('arrows-l')"
                    @click.stop="toPath('back')"
                />
                <div class="flex-a" @click.stop="toPath('home')" id="12">
                    <div class="line-col marlr20" ></div>
                    <el-image
                        style="width: 14px; height: 14px"
                        :src="getAssetsImages('home-icon')"
                    />
                    <div class="btn-txt mar-l10">{{ menuItem.name }}</div>
                </div>
            </div>
            <div v-else class="flex-a">
                <el-image
                    class="marlr10"
                    style="width: 10px; height: 10px"
                    :src="getAssetsImages('arrows-icon3')"
                />
                <div class="head-btn padlr13 flex-a">
                    <div class="btn-dot mar-r10" :class="{'dot-cor': menuIndex === menuList.length -1}"></div>
                    <div class="btn-txt">{{ menuItem.name }}</div>
                </div>
            </div>
        </div>
    </div>

  </div>
</template>

<script setup>
/**
 *  head menu 组件
*/
import router from "@/router";
import { ref, defineProps } from "vue"

const props = defineProps({
    menuList: {
        type: Array,
        default: []
    }
})

let menuList = ref([])
menuList.value = props.menuList
const toPath = (key, index) => { 
    if (key=== 'back' || index == 1) { 
        router.back()
    }
    if (key === 'home') { 
        router.push("/")
    }
}
const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.head-btn-box {
    .btn-txt {
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #575966;
    }
    .head-btn {
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    line-height: 32px;
    .btn-dot {
        width: 6px;
        height: 6px;
        background: #575966;
        border-radius: 3px;
    }
    .dot-cor {
        background: #0052d9;
    }
    .line-col {
        width: 1px;
        height: 10px;
        background: #d8d8d8;
    }
    }
}
</style>